<template>
	<div class="admin-wiki-edit-left" @contextmenu.stop="contextmenu" v-if="viewModel">
		<div class="product_title" @click.stop="clickStop" v-if="editModel">
			<a class="priview" target="_blank" :href="'/web/wiki?id='+viewModel.project.id">预览</a>
			<i class="el-icon-picture-outline-round"></i>{{viewModel.project.name}}
		</div>
		<el-table :class="editModel?'edit_model':'view_model'" :data="viewModel.wikis" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%;margin-bottom: 20px;">
			<el-table-column prop="name" :label="viewModel.project.name" width="300px">
				<template slot-scope="scope">
					<div :title="scope.row.name" :class="(!scope.row.children||scope.row.children.length===0)&&scope.row.level===1?'wiki_title level_1':'wiki_title'" @click="editArticle(scope.row)" @contextmenu="contextmenuChild($event,scope.row)">
						{{scope.row.name}}
					</div>
				</template>
			</el-table-column>
		</el-table>
		<menu-item ref="menuItem" @addWiki="addWiki" v-if="editModel"></menu-item>
		<menu-list ref="menuList" @addWiki="addWiki" @deleteWiki="deleteWiki" v-if="editModel"></menu-list>
	</div>
</template>


<script>
	import menuItem from './event/menu-item'
	import menuList from './event/menu-list'
	import draggable from 'vuedraggable'
	import Sortable from 'sortablejs'
	import ala from 'ala'
	export default {
		components: {
			menuItem,
			menuList
		},
		data() {
			return {
				expandKeys: []
			}
		},
		props: {
			viewModel: {},
			defaultWiki: {}, // 默认
			editModel: {
				default: true
			} // 是否为编辑模式
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.$nextTick(() => {
					if (this.editModel) {
						this.rowDrop()
					}
				})
				if (this.editModel === false) {
					this.expandKeys = this.$admin.wikiExpandKeys(this.viewModel.wikis, this.defaultWiki)
				}
			},
			contextmenu(ev) {
				ev.preventDefault()
				this.$nextTick(async () => {
					if (this.$refs.menuItem) {
						this.$refs.menuItem.contextmenu(ev)
					}
				})
			},
			contextmenuChild(ev, father) {
				ev.preventDefault()
				this.$nextTick(async () => {
					if (this.$refs.menuList) {
						await this.$refs.menuList.contextmenu(ev, father)
					}
				})
			},

			async addWiki(fatherWiki) {
				var result = await this.$admin.wikiAdd(this.viewModel, fatherWiki)
				this.$emit('change', result.wikis, result.wikiAdd)
				if (fatherWiki) {
					this.expandKeys.push(fatherWiki.id.toString()) // 展开
				}
			},
			async deleteWiki(data) {
				var wikis = await this.$admin.wikiDel(this.viewModel.wikis, data)
				this.$emit('change', wikis)
			},
			// 编辑文章
			editArticle(data) {
				this.$emit('editWiki', data)
			},
			// 行拖拽
			rowDrop() {
				const tbody = document.querySelector('.el-table__body-wrapper tbody')
				const _this = this
				Sortable.create(tbody, {
					group: 'nested',
					animation: 150,
					fallbackOnBody: true,
					swapThreshold: 0.65,
					onEnd(evt) {
						var soreResult = _this.$admin.wikiSort(_this.viewModel.wikis, evt.newIndex, evt.oldIndex)
						if (soreResult) {
							_this.$emit('change', soreResult)
						} else {
							_this.init()
						}
					}
				})
			},
			clickStop() {
				return false
			}
		}
	}
</script>

<style lang="scss">
	.admin-wiki-edit-left {
		.view_model {
			padding-left: 10px;
		}

		.product_title {
			i {
				font-size: 16px;
				margin-right: 4px;
			}

			color: #ad5beb;
			font-size: 17px;
			font-weight: 700;
			border-bottom: 1px solid #ebeef5;
			height: 50px;
			line-height: 50px;

			.priview {
				float: right;
				font-weight: normal;
				color: #ad5beb;
			}
		}

		.el-table__header-wrapper {
			display: none;
		}

		.el-table .cell {
			padding-left: 0px;
			display: flex;
			align-items: center
		}

		.edit_model td {
			border-bottom: 1px dashed #ebeef5;
			padding: 0px !important;
		}

		.view_model {
			tr {
				border: none;
			}

			.wiki_title {
				font-size: 14px;
				display: inline;
				height: 38px;
				line-height: 38px;
				width: 200px;
				text-decoration: none;
				color: #304455;
				cursor: pointer;
				font-size: 16px;
				font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
			}

			td {
				border: none;
				padding: 0px !important;
			}

			.el-table__row--level-0,
			.level_1 {
				font-weight: 600;
				font-size: 1.4rem;
			}
		}

		.wiki_title {
			font-size: 14px;
			display: inline-block;
			height: 40px;
			line-height: 40px;
			width: 200px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.level_1 {
			margin-left: 20px;
		}

		height: 100%;

		.el-menu {
			border: none;
		}

		.el-submenu__title {
			height: 45px;
			line-height: 45px;
			border-bottom: 1px dashed #f4f5f8;

			&:hover {
				background: #f7f8fa;
			}
		}

		.el-submenu.is-active .el-submenu__title {
			border-bottom-color: #f4f5f8;
		}

		.el-submenu .el-menu-item {
			height: 45px;
			line-height: 45px;

			&.is-active,
			&:hover {
				background: #f7f8fa;
			}
		}
	}
</style>